<template>
  <div class="login">
    <div class="loginleft">
      <div class="loginmenu">
        <div class="statusheader">
          <div
            class="statusoption"
            style="{ backgroundColor: '#b0a4e3' }"
          >
            登陆
          </div>
        </div>
        <div class="loginform">
          <el-form
            label-positio="top"
            label-width="100px"
            :model="formLabelAlign"
            class="loginformland"
          >
     
            <el-form-item label="账户">
              <el-input
                placeholder="请输入账户"
                v-model="formLabelAlign.name"
              />
            </el-form-item>
            <el-form-item label="密码">
              <el-input
                type="password"
                placeholder="请输入密码"
                v-model="formLabelAlign.password"
              />
              <div class="PasswordPrompt">忘记密码？请点击</div>
            </el-form-item>
            <el-form-item class="loginbutton">
              <el-button type="success" @click="landForm">登陆</el-button>
              <el-button @click="landresetForm()">重置</el-button>
            </el-form-item>
          </el-form>
        
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts"  setup >
import { reactive, ref } from "vue";
import { D_landlogin } from "../../api/login.js";
// import { useRouter } from "vue-router";
import { FormInstance, FormRules, ElMessage } from "element-plus";
import { useAuthStore } from "../../store/auth";

const authStore = useAuthStore();

// const router = useRouter();

const ruleFormRef = ref<FormInstance>();

const formLabelAlign = reactive({
  name: "",
  password: "",
});

const formregister = reactive({
  username: "",
  password: "",
  repassword: "",
  phone: "",
  code: "",
});

const landForm = async () => {
  const landinfo = {
    username: formLabelAlign.name,
    password: formLabelAlign.password,
  };
    D_landlogin(landinfo.username, landinfo.password).then((response) => {
      if (response.data.status === 1) {
        const user = {
          username: response.data.username,
          name: response.data.name,
          image: response.data.image,
        };
        authStore.login(user);
        uni.switchTab({
          url: '/pages/o_user/person/index'
        });
        ElMessage({
          showClose: true,
          message: "登陆成功",
          type: "success",
        });
      } else {
        formLabelAlign.password = "";
        ElMessage.error("登陆失败，用户名或密码错误");
      }
    });
};

function landresetForm() {
  Object.assign(formLabelAlign, {
    name: "",
    password: "",
  });
}

function registercode() {}

function registerresetForm() {
  Object.assign(formregister, {
    username: "",
    id: "",
    password: "",
    repassword: "",
    phone: "",
    code: "",
  });
}

// const resetForm = (formEl: FormInstance | undefined) => {
//   if (!formEl) return
//   formEl.resetFields()
// }
</script>

<style scoped>
.login {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: row;
}
.loginleft {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgba(46, 78, 126, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
}

.loginmenu {
  width: 80%;
  height: 75%;
  background-color: rgba(74, 66, 102, 0.8);
  border: 3px solid #fff;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.statusheader {
  width: 100%;
  height: 5%;
  color: #fff;
  display: flex;
  flex-direction: row;
  margin-bottom: 5%;
}

.statusoption {
  width: 100%;
  height: 100%;
  background-color: #b0a4e3;
  display: flex;
  justify-content: center;
  align-items: center;
  user-select: none;
}

.loginform {
  width: 100%;
  height: 85%;
}

.loginformland {
  width: 90%;
  user-select: none;
}

.PasswordPrompt {
  color: #cfcfcf;
  font-size: 12px;
  user-select: none;
}
:deep(.el-form-item__label) {
  color: #ffffff !important;
}

.custom-radio {
  background-color: rgb(255, 255, 255);
  padding: 5px;
  border-radius: 5px;
}

.loginbutton {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logjpg {
  /* background-image: url("../../assets/img/login/login.png"); */
  background-size: cover;
  background-position: center;
  width: 100%;
}
</style>


